import { dom, Nodes } from '@knno/dom';
import { vars } from '@knno/ui/global.css';
import { Grid, grid } from '@knno/ui/grid';
import { pulldown } from '@knno/ui/pulldown';
import { genText } from './utils';

function genData() {
	const result: unknown[][] = [];
	for (let i = 0; i < 50; i++) {
		result.push([i, genText()]);
	}
	return result;
}

export function renderPulldown() {
	let gd: Grid;
	let timeDiv: Nodes;
	return [
		dom.h2().text('下拉刷新(耗时1秒)'),
		pulldown()
			.append(
				grid()
					.ref((g) => (gd = g))
					.columns([
						{ key: 0, title: '列1' },
						{ key: 1, title: '列2' },
					])
					.rows(genData())
			)
			.onRefresh(() => {
				return new Promise((resolve) => {
					setTimeout(() => {
						gd.rows(genData());
						resolve();
					}, 1000);
				});
			}),

		dom.h2().text('下拉刷新'),
		pulldown()
			.append(
				dom
					.div()
					.ref((d) => (timeDiv = d))
					.text(new Date().toLocaleString())
					.css({
						display: 'flex',
						alignItems: 'center',
						justifyContent: 'center',
						background: vars.color.baseBackground,
						fontSize: '2rem',
						webkitUserSelect: 'none',
						userSelect: 'none',
					})
			)
			.onRefresh(() => {
				timeDiv.text(new Date().toLocaleString());
				return Promise.resolve();
			}),
	];
}
